﻿<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>点密度专题图</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            }
            #map{
                position: relative;
                height: 510px;
                border:1px solid #3473b7;
            }
            #toolbar {
                position: relative;
                padding-top: 5px;
                padding-bottom: 10px;
            }
        </style>
        <link href='./css/bootstrap.min.css' rel='stylesheet' />
        <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
        <script src='../libs/SuperMap.Include.js'></script>
        <script type="text/javascript">
            var map, baseLayer, layersID, themeLayer,
            host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
            url=host+"/iserver/services/map-world/rest/maps/World";
            function init(){
                map = new SuperMap.Map("map",{controls: [
                    new SuperMap.Control.LayerSwitcher(),
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    })]
                });
                baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
                baseLayer.events.on({"layerInitialized":addLayer});
            }

            function addLayer() {
                map.addLayer(baseLayer);
                map.setCenter(new SuperMap.LonLat(0, 0), 0);
                map.allOverlays = true;
            }
            function addThemeDotDensity() {
                removeTheme();
                var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),
                        dotStyle = new SuperMap.REST.ServerStyle({
                            markerSize: 3,
                            markerSymbolID: 12
                        }),
                        themeDotDensity = new SuperMap.REST.ThemeDotDensity({
                            dotExpression: "Pop_1994",
                            value: 5000000,
                            style: dotStyle
                        }),
                        themeParameters = new SuperMap.REST.ThemeParameters({
                            themes: [themeDotDensity],
                            datasetNames: ["Countries"],
                            dataSourceNames: ["World"]
                        });
                themeService.processAsync(themeParameters);
            }

            function themeCompleted(themeEventArgs) {
                if(themeEventArgs.result.resourceInfo.id) {
                    themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("全世界人口点密度专题图", url, {cacheEnabled: false, transparent: true,layersID: themeEventArgs.result.resourceInfo.id}, {"maxResolution":"auto"});
                    themeLayer.events.on({"layerInitialized": addThemelayer});
                }
            }
            function addThemelayer() {
                map.addLayer(themeLayer);
            }
            function themeFailed(serviceFailedEventArgs) {
                //doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
                alert(serviceFailedEventArgs.error.errorMsg);
            }

            function removeTheme() {
                if (map.layers.length > 1) {
                    map.removeLayer(themeLayer, true);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div id="toolbar">
            <input type="button" class="btn" value="创建专题图" onclick="addThemeDotDensity()" />
            <input type="button" class="btn" value="移除专题图" onclick="removeTheme()" />
        </div>
        <div id="map"></div>
    </body>
</html>
